<template>
  <view class="car-info-content">
    <view class="license-no">{{ info.licenseNo || '-' }}</view>
    <view class="modal-name">{{ info.modelName || '-' }}</view>
  </view>
  <ve-card style="margin-top: 24rpx">
    <ve-cell-val label="车架号" :value="info.vin" />
    <ve-cell-val label="车辆当前归属门店" :value="info.siteName" />
    <ve-cell-val label="归属车场" :value="info.libraryName" />
    <slot />
  </ve-card>
</template>

<script setup>
  defineProps({
    info: Object,
  })
</script>

<style lang="scss" scoped>
  .car-info-content {
    background-image: url('@/static/images/carinfo-bc.png');
    background-size: cover;
    background-position: right;
    display: flex;
    flex-direction: column;
    align-items: self-start;
    justify-content: center;
    padding: 32rpx;
    color: #ffffff;
    border-radius: 8rpx;
    line-height: 44rpx;

    .license-no {
      font-size: 40rpx;
      font-weight: 600;
    }
    .modal-name {
      margin-top: 16rpx;
      font-size: 28rpx;
    }
  }
  // :deep(.ve-cell-title) {
  //   width: 240rpx;
  //   max-width: 240rpx;
  // }
</style>
